<div class="setting-container" fxLayout="column">
  <mat-tab-group mat-stretch-tabs fxFlex>
      <mat-tab>
        <ng-template mat-tab-label>
          <mat-icon color="primary">ondemand_video</mat-icon>{{i18n.lang.mediaSetting}}
        </ng-template>
        <div fxLayout="column" fxLayoutAlign="start start">
          <div class="video-setting" fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="20px">
            <div fxLayout="column" fxLayoutAlign="center start">
              <mat-form-field>
                  <mat-select [(value)]="selectedVideoDevice" (selectionChange)="selectVideo()">
                    <mat-option *ngFor="let device of media.videoDevices" [value]="device.deviceId">{{device.label}}</mat-option>
                  </mat-select>
              </mat-form-field>
              <mat-form-field>
                  <mat-select [(value)]="selectedVideoResolution" (selectionChange)="selectVideo()">
                    <mat-option [value]="0">640 * 360</mat-option>
                    <mat-option [value]="1">640 * 480</mat-option>
                    <mat-option [value]="2">1280 * 720</mat-option>
                  </mat-select>
              </mat-form-field>
              <div fxLayout="row" fxLayoutAlign="start center" *ngIf="profile.privilege.classControl">
                <mat-form-field>
                  <input
                    #urlInput
                    type="url"
                    matInput
                    [(ngModel)]="logoUrl"
                    [placeholder]="i18n.lang.setLogoUrl">
                </mat-form-field>
                <button mat-icon-button color="accent"
                  [disabled]="!urlInput.value.trim().match('^http.?://')"
                  (click)="setLogoUrl()">
                  <mat-icon>refresh</mat-icon>
                </button>
              </div>
              <mat-checkbox
                *ngIf="profile.privilege.classControl"
                [(ngModel)]="videoFilter">{{i18n.lang.videoFilter}}</mat-checkbox>
            </div>
            <div class="video-display">
              <video autoplay controls
                [ngClass]="{'video-filter': videoFilter}"
                [srcObject]='videoDisplayStream'></video>
              <img id="setting-logo-img" class="video-description">
            </div>
          </div>
          <div class="audio-setting" fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="20px">
            <mat-form-field>
                <mat-select [(value)]="selectedAudioDevice" (selectionChange)="selectAudio()">
                  <mat-option *ngFor="let device of media.audioDevices" [value]="device.deviceId">{{device.label}}</mat-option>
                </mat-select>
            </mat-form-field>
            <div class="audio-display"
              fxLayout="row"
              fxLayoutAlign="end end"
              fxLayoutGap="5px">
              <mat-icon color="warn">mic</mat-icon>
              <div
                *ngFor="let vol of volumeArray; index as index"
                [ngClass]="{'audio-volume-meter': true, 'meter-green': currentVolume>index*5}"
                [ngStyle]="{'height.px': 12 + index }"
                ></div>
            </div>
          </div>
        </div>
      </mat-tab>
      <mat-tab *ngIf="profile.privilege.classControl">
        <ng-template mat-tab-label>
          <mat-icon color="primary">meeting_room</mat-icon>{{i18n.lang.roomSetting}}
        </ng-template>
        <mat-form-field style="width: 100%">
            <textarea matInput
              [(ngModel)]="announcementText"
              [placeholder]="i18n.lang.announcementInput">
            </textarea>
        </mat-form-field>
      </mat-tab>
  </mat-tab-group>
  <mat-divider></mat-divider>
  <div fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="20px">
    <button mat-raised-button
      color="accent"
      (click)="saveSetting()">{{i18n.lang.save}}</button>
    <button mat-raised-button
      color="accent"
      (click)="closeDialog()">{{i18n.lang.close}}</button>
  </div>
</div>
